<template>
  <main>
    <p class="title">点我加油清单</p>
    <div class="flex-between box">
      <img src="~assets/images/logo1.jpg" alt="" class="shop_logo">
      <div>
        <p>柴油</p>
      </div>
    </div>
    <van-cell-group class="discount">
      <van-cell title="优惠" :value="stationData.discount + '元/升'" />
    </van-cell-group>
    <van-cell-group class="mt-1">
      <van-cell title="加油金额" :value="'¥' + Number(heartCard.order_amount) / 100" />
      <van-cell title="优惠金额" :value="'¥' + discount" />
      <van-cell title="小计" :value="'¥' + amount" />
      <van-cell title="充值手机号" :value="heartCard.phone" />
      <van-field v-model="heartCard.remark" label="备注" placeholder="请输入备注信息" input-align="right"/>
    </van-cell-group>

    <div class="footer">
      <div class="left">
        实付金额：
        <span class="rmb">{{ amount }}</span>
      </div>
      <van-button 
        class="default-btn"
        block 
        :loading="loading"
        loading-text="加载中..."
        @click="createOrder">
        去支付
      </van-button>
    </div>
  </main>
</template>

<script>
import { Dialog, Toast } from 'vant';
import {mapGetters, mapActions} from 'vuex'
import * as Api from 'api'

export default {
  data() {
    return {
      loading: false,
      remark: '',
    }
  },
  computed: {
    ...mapGetters([
      'heartCard',
      'user',
      'stationData',
    ]),
    amount() {
      return (this.heartCard.order_amount * (Number(this.stationData.now_price) / Number(this.stationData.nation_price)) / 100).toFixed(2)
    },
    discount() {
      return (Number(this.heartCard.order_amount / 100) - Number(this.amount)).toFixed(2)
    }
  },
  created() {
    this.$emit('showTabMenu', false);
    if (!this.heartCard.order_amount) {
      this.$router.push({name: 'StationList'})
    }
  },
  methods: {
    ...mapActions([
      'setHeartCard'
    ]),
    createOrder() {
      this.loading = true
      // 没有微信授权
      if (!this.user.oauth_id) {
        Toast('请先微信授权登录后再付款！')
        setTimeout(() => {
          this.$router.push({name: 'WechatLogin'})
        }, 2000)
        this.loading = false
        return
      }
      let params = {
        ...this.heartCard,
        remark: this.remark
      }
      Api.CreateOrder(this.heartCard).then(res => {
        if (res.data.respCode == '00') {
          // 调起微信支付
          this.goPayment(JSON.parse(res.data.payInfo), res.data.merchOrderNo)
        } else {
          Toast(res.data.respMsg)
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    onBridgeReady(info, order_id) {
      WeixinJSBridge.invoke('getBrandWCPayRequest', {
        "appId": info.appId,
        //公众号名称，由商户传入     
        "timeStamp": info.timeStamp,
        //时间戳，自1970年以来的秒数     
        "nonceStr": info.nonceStr,
        //随机串     
        "package": info.package,
        "signType": "RSA",
        //微信签名方式：     
        "paySign": info.paySign //微信签名 
      }, (res) => {
        console.log(res, '支付回调');
        if (res.err_msg == "get_brand_wcpay_request:ok") {
          // 使用以上方式判断前端返回,微信团队郑重提示：
          //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          this.setHeartCard({})
          this.$router.push({name: 'OrderList'})
        } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
          this.setHeartCard({})
          this.$router.push({name: 'OrderList'})
        }
      });
    },
    goPayment(info, order_id) {
      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        }
      } else {
        this.onBridgeReady(info, order_id);
      }
    }
  }
}
</script>

<style lang="less" scoped>
main{
  background: #f5f5f5;
  height: 100%;
  padding-bottom: 0;
}
.title{
  font-size: 15px;
  font-weight: bold;
  padding: 10px 20px;
  background: #fff;
}
.shop_logo{
  max-width: 60px;
  max-height: 60px;
  // object-fit: cover;
}
.box{
  padding: 20px;
  align-items: center;
}
.def_color{
  color: #FF5722;
}
.mt-1{
  margin-top: 10px;
}
.discount .van-cell__value{
  color: red;
}
.price .van-cell__value{
  color: #ff8d0b;
}
.cell{
  padding: 10px 20px;
  background: #fff;
  font-size: 14px;
  // margin-bottom: 8px;
  border-bottom: 1px solid #f5f5f5;
}

.footer{
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 2px 2px 10px #eee;
  .left{
    padding-left: 20px;
    font-size: 14px;
    span{
      color: #ff8d0b;
      font-weight: bold;
      font-size: 20px;
    }
  }
  button{
    width: 120px;
    border-radius: 0;
    height: 100%;
  }
}
.van-cell__value{
  color: #323232;
}
</style>